import React from 'react'

export default class AppMenu extends React.Component{

    stopEffervescence = (event) =>{
        if(event && event.stopPropagation){
            event.stopPropagation();  //  w3c 标准
        }else{
            event.cancelBubble = true;  // ie 678  IE浏览器
        }
    }

    render(){
        const {item={},setting={},onAdd,onDelete,type='view'} = this.props
        const {col,imgWidth,imgHeight,titleFontSize,titleColor} = setting
        const {id,setting:_setting={}} = item
        const {title,img,url} = _setting

        let dynamicCssContent = {
            width: imgWidth+'px',
        }
        let dynamicCssImg = {
            width: imgWidth+'px',
            height: imgHeight+'px'
        }

        let tool = null
        if(type == 'view'){

        }else if(type == 'selected'){
            tool = (
                <div className='customFeatures-userSetting-AppMenu-delete' onClick={(e)=>{onDelete(id);this.stopEffervescence(e.target);}}>
                    <i className='icon-coms-Narrow'></i>
                </div>
            )
        }else if(type == 'noSelected'){
            tool = (
                <div className='customFeatures-userSetting-AppMenu-add' onClick={(e)=>{onAdd(id);this.stopEffervescence(e.target);}}>
                    <i className='icon-coms-Enlarge'></i>
                </div>
            )
        }
        return (
            <div className='customFeatures-userSetting-AppMenu' style={{width:parseInt(100/col)+'%'}}>
                <div className='customFeatures-userSetting-AppMenu-content' style={dynamicCssContent}>
                    {
                        img ? (
                            <img className='customFeatures-userSetting-AppMenu-img' src={img} style={dynamicCssImg}/>
                        ) : null
                    }
                    {tool}
                    <div className='customFeatures-userSetting-AppMenu-title' style={{color:titleColor,'font-size':titleFontSize+'px'}}>{title}</div>
                </div>

            </div>
        )
    }
}